import React, { useRef, useState } from 'react';
import { connect } from 'umi';
import { Card } from 'antd';
import WechatEdit from './wechatEdit'
import WechatNative from './wechatNative'
import WechatNavigation from './wechatNavigation'
import WechatHome from './wechatHome';
const WechatPage = (props) => {
    const { } = props
    const [activeTabKey, setActiveTabKey] = useState('wechatHome');

    const onTabChange = (key) => {
        setActiveTabKey(key);
    };
    const tabList = [
        {
            key: 'wechatHome',
            tab: '店铺主页',
        },
        {
            key: 'wechatNavigation',
            tab: '店铺导航',
        },
        {
            key: 'wechatNative',
            tab: '个人中心',
        },
        {
            key: 'wechatEdit',
            tab: '微页面',
        },
    ];
    const Content = {
        wechatHome: <WechatHome></WechatHome>,
        wechatNavigation: <WechatNavigation></WechatNavigation>,
        wechatEdit: <WechatEdit></WechatEdit>,
        wechatNative: <WechatNative></WechatNative>
    }[activeTabKey]
    return <Card
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
            onTabChange(key);
        }} title='店铺装修'
    >{Content}</Card>
}
export default WechatPage